<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟列表 - 动态高度</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            padding: 20px;
            background: #4CAF50;
            color: white;
            text-align: center;
        }

        .virtual-list-container {
            width: 800px;
            height: 800px;
        }

        .list-item {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background: white;
            transition: background-color 0.2s;
        }

        .list-item:hover {
            background-color: #f8f9fa;
        }

        .item-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .item-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>虚拟列表演示</h1>
            <p>30,000 行数据 - 动态高度支持</p>
        </div>

        <div class="virtual-list-container">
            <div id="virtualList">
            </div>
        </div>
    </div>

    <!-- 引入 VirtualList 组件 -->
    <script src="./ui-virtual-list.js"></script>

    <script>
        // 全局变量
        let _virtualList;

        /**
         * 生成测试内容
         * @param {number} index - 索引
         * @returns {string} 内容字符串
         */
        function getContentByIndex(index) {
            const contents = [
                '这是一个简短的内容。',
                '这是一个中等长度的内容，包含更多的文字描述，用于测试不同高度的列表项渲染效果。',
                '这是一个较长的内容，包含大量的文字描述和详细信息。通过这种方式可以测试虚拟列表在处理不同高度列表项时的性能表现。这个内容会占用更多的垂直空间，从而创建出高度不一致的列表项。',
                '短内容',
                '这是另一个中等长度的测试内容，用于验证虚拟滚动组件在处理动态高度时的稳定性和准确性。'
            ];
            return contents[index % contents.length];
        }

        /**
         * 默认渲染函数
         * @param {number} index - 索引
         * @returns {string} HTML字符串
         */
        function defaultRenderItem(index) {
            // 根据索引生成不同长度的内容，模拟动态高度
            const contentLength = 50 + (index % 5) * 30;
            const fullContent = getContentByIndex(index);
            const content = fullContent.substring(0, contentLength) + (fullContent.length > contentLength ? '...' : '');

            return `
                <div class="list-item">
                    <div class="item-title">列表项 ${index + 1}</div>
                    <div class="item-content">${content}</div>
                </div>
            `;
        }

        /**
         * 初始化应用
         */
        function initApp() {
            const container = document.getElementById('virtualList');

            // 创建虚拟列表实例
            _virtualList = new UIVirtualList(container, {
                itemHeight: 80,
                bufferSize: 5,
                throttleDelay: 16,
                pauseThreshold: 50,
                itemCount: 30000,
                renderItem: defaultRenderItem
            });

            console.log('虚拟列表初始化完成，数据量:', 30000);
        }

        window.scrollToIndex = (index) => {
            _virtualList.scrollToIndex(index);
        }
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>

</html>